<template>
	<view class="content">
		<view class="topheader">
			<view class="topstatus">
				<image class="orderImg" :src="orderdatas.status | filterOrder" mode=""></image>
			</view>
			<view class="topAddr">
				<view class="address">
					<view class="addresscont">
						<image class="addicon" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/icon_address.png" mode=""></image>
						<view class="address_detail">
							<view class="addr_top">
								<text>{{orderdatas.realName}}</text><text class="text">{{orderdatas.userPhone}}</text>
							</view>
							<view class="addr">{{orderdatas.userAddress}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="group">
			<view class="section">
				<view class="group_section">
					<view class="goods" v-for="(item,index) in orderdatas.cartInfo" :key="index">
						<view class="goods_top">
							<image class="goodsImg" :src="item.productInfo.image" mode="aspectFill"></image>
							<view class="goods_info">
								<view class="goods_name ellipsis_2">{{item.productInfo.storeName}}</view>
								<view class="goods_attr">{{item.attrInfo.sku}}</view>
								<view class="goods_price">
									<view class="price">
										<view class="pricesign iconfont">&#xe604;</view>
										<view class="money">
											<text>{{item.attrInfo.integral}}</text>
										</view>
									</view>
									<view class="goods_num">x{{item.cartNum}}</view>
								</view>
							</view>
						</view>
						
						<view class="goods_bottom" v-if="orderdatas.status == 3 && item.isReply == 0">
							<view class="botBtn" @click="goAppraise(item)">评价</view>
						</view>
						
					</view>
					
				</view>
				<view class="order_total">
					<view class="total_name">运费</view>
					<view class="total_info">{{orderdatas.freightPrice == 0 ? '包邮' : orderdatas.freightPrice}}</view>
				</view>
				<block v-if="orderdatas.status != 0">
					<view class="order_total">
						<view class="total_name">小计</view>
						<view class="total_info" style="color: #E42221;"> 
							<!-- <text class="iconfont sign">&#xe604;</text> {{orderdatas.totalPrice}} -->
							<text>{{orderdatas.totalIntegral}}积分</text>
						</view>
					</view>
				</block>
				
				<view class="order_total" v-if="orderdatas.status == 0">
					<view class="total_name">订单编号</view>
					<view class="total_info">{{orderdatas.orderId}}</view>
				</view>
			</view>
			
			<!-- <view class="section" v-if="orderdatas.status == 0">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in itemsPay" :key="index">
						<view class="uni_left">
							<image class="left_image" :src="item.image" mode=""></image>
							<view class="uni_name">{{item.name + ' + '}}</view>
						</view>
						<view>
							<radio :value="item.value" class="radio" color="#E42221" />
						</view>
					</label>
				</radio-group>
			</view> -->
			
			<view class="section" v-if="orderdatas.status != 0">
				<view class="order_title">订单信息</view>
				<view class="order_info_list">
					<view class="order_list_left">订单编号</view>
					<view class="order_info_detail">{{orderdatas.orderId}}</view>
				</view>
				<view class="order_info_list">
					<view class="order_list_left">下单时间</view>
					<view class="order_info_detail">{{orderdatas.createTime}}</view>
				</view>
				<view class="order_info_list">
					<view class="order_list_left">支付方式</view>
					<view class="order_info_detail">{{orderdatas.payType | paytypeStatus}}</view>
				</view>
				<view class="order_info_list">
					<view class="order_list_left">付款时间</view>
					<view class="order_info_detail">{{orderdatas.payTime}}</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="orderdatas.status != 1 && orderdatas.status != 3">
			<view :class="['bottom_cont',{bottomCurr: orderdatas.status != 0}]">
				<block v-if="orderdatas.status == 0">
					<view class="settleTotal" >
						<text>合计</text>
						<text class="settle_txt">{{orderdatas.totalIntegral}}积分</text>
					</view>
					<view class="settle_btn">
						<view class="botBtn" @click="cancelOrder(orderdatas)">取消订单</view>
						<view class="botBtn payBtn" @click="payOrder(orderdatas)">确认支付</view>
					</view>
				</block>
				
				<view class="settle_btn" v-if="orderdatas.status == 2">
					<view class="botBtn" @click="applyAfter(orderdatas)">申请售后</view>
					<view class="botBtn payBtn" @click="sureGoods(orderdatas)">确认收货</view>
				</view>
				<view class="settle_btn" v-if="orderdatas.status == 4">
					<view class="botBtn" @click="cancelOrder(orderdatas)">删除订单</view>
				</view>
			</view>
			
			<ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" @forgetPwd="forgetPwd" :value="paymentPwd" digits="6" />
		</view>
	</view>
</template>

<script>
	import ssPaymentPassword from '../../../../../components/sanshui-payment-password'
	export default {
		components:{
			ssPaymentPassword
		},
		data() {
			return {
				itemsPay:[
					{
						value: '1',
						name: '支付宝',
						checked: 'true',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/alipay.png'
					},
					{
						value: '2',
						name: '微信',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wxpay.png'
					},
					{
						value: '3',
						name: '余额',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wallet.png'
					}
					// ,{
					// 	value: '4',
					// 	name: '银联',
					// 	image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/bankpay.png'
					// },
					// {
					// 	value: '5',
					// 	name: '通宝',
					// 	image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/interpay.png'
					// }
				],
				key:'' ,// 订单唯一标识
				orderdatas:{},
				paytype:'',// 支付方式
				mode:1,
				paymentPwd:'',
				payPassword:'' // 支付密码
				
			}
		},
		onLoad(options) {
			console.log(options)
			if (Object.keys(options).length != 0) {
				this.key = options.key;
				this.getOrderDetail()
			}
			let that = this;
			uni.$on('myOrderDetail',function(data){
			    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.getOrderDetail(); //调用加载
			})
		},
		
		filters:{
			filterOrder: function (val) {
				if (val == 0) {
					return '//orderd1.png'
				} else if (val == 1) {
					return '//orderd2.png'
				} else if (val == 2) {
					return '//orderd3.png'
				} else if (val == 3) {
					return '//orderd4.png'
				} else if (val == 4) {
					return '//orderd5.png'
				}
			},
			paytypeStatus: function (val) {
				if (val == 1) {
					return '支付宝'
				} else if (val == 2) {
					return '微信'
				} else if (val == 3) {
					return '余额'
				} else if (val == 4) {
					return '银联'
				} else if (val == 4) {
					return '通宝'
				}
			}
		},
		methods: {
			// 选择支付方式、
			radioChange: function (e) {
				console.log(e)
				this.paytype = e.detail.value;
			},
			// 申请售后
			applyAfter: function (orderdatas) {
				uni.navigateTo({
					url: '../refundOrder/refundOrder?key=' + orderdatas.unique,
				});
			},
			// 获取订单详情
			getOrderDetail: function () {
				let that = this;
				that.api.shoppingOrderDetail(that.key).then(res => {
					console.log(res)
					that.orderdatas = res.data;
				})
			},
			// 取消订单
			cancelOrder: function (orderdatas) {
				let that = this;
				that.api.cancelShoppingOrder({
					uni:orderdatas.unique
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function () {
						uni.navigateBack({
							delta: 1
						});
						uni.$emit('myOrder',{msg:'页面更新'})
					},500)
				})
			},
			// 确认支付
			payOrder: function (orderdatas) {
				let that = this;
				console.log(that.paytype,"ppp")
			
					that.api.userOrderPayment({
						paytype:"4",
						uni:orderdatas.unique
					}).then(res => {
						that.tui.toast(res.data)
						setTimeout(function() {
							that.cacheHelper.updateUserInfo()
							uni.$emit('myOrder',{msg:'页面更新'})
							uni.$emit('myOrderDetail',{msg:'页面更新'})
							uni.navigateBack({
								delta:1
							})
						}, 500)
					}).catch(err => {
						console.log(err)
						that.tui.toast(err.msg)
					})
					
				
			},
			// 余额支付
			submitHandle: function (e) {
				let that = this;
				that.payPassword = e.value;
				that.api.userOrderPayment({
					paytype:that.paytype,
					uni:that.orderdatas.unique,
					payPassword:that.payPassword
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function() {
						that.cacheHelper.updateUserInfo()
						uni.$emit('myOrder',{msg:'页面更新'})
						uni.$emit('myOrderDetail',{msg:'页面更新'})
					}, 500)
					
				}).catch(err => {
					that.tui.toast(err.msg)
				})
			},
			// 忘记密码
			forgetPwd: function () {
				uni.navigateTo({
					url: '../../paymentSetting/setPayPassword/setPayPassword',
				});
			},
			// 评价
			goAppraise: function (item) {
				uni.navigateTo({
					url: '../userAppraise/userAppraise?unique=' + item.unique,
				});
			},
			// 删除订单
			cancelOrder: function (orderdatas) {
				let that = this;
				that.api.cancelShoppingOrder({
					uni:orderdatas.unique
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function () {
						uni.$emit('myOrder',{msg:'页面更新'});
						uni.navigateBack({
							delta: 1
						});
					},500)
				})
			},
			// 确认收货
			sureGoods: function (orderdatas) {
				let that = this;
				uni.showModal({
					content: '确认收货',
					success: res => {
						if (res.confirm) {
							that.api.userSureGoods({
								uni:orderdatas.unique
							}).then(res => {
								console.log(res)
								that.tui.toast(res.data);
								setTimeout(function () {
									uni.$emit('myOrder',{msg:'页面更新'})
									uni.$emit('myOrderDetail',{msg:'页面更新'})
								},500)
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #F5F5F5;
		font-family: 'PingFang SC';
		font-size: 28rpx;
		color: #212121;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.topheader {
		width: 100%;
		box-sizing: border-box;
		.topstatus {
			width: 100%;
			box-sizing: border-box;
			height: 260rpx;
			.orderImg {
				width: 100%;
				height: 100%;
			}
		}
		.topAddr {
			width: 100%;
			box-sizing: border-box;
			height: 90rpx;
			position: relative;
			.address {
				width: 710rpx;
				box-sizing: border-box;
				padding: 24rpx;
				background: #FFFFFF;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.6);
				border-radius: 12rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: -98rpx;
				margin: auto;
				z-index: 10;
				.addresscont {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.addicon {
						width: 52rpx;
						height: 52rpx;
					}
					.address_detail {
						width: calc(100% - 52rpx);
						box-sizing: border-box;
						padding-left: 15rpx;
						.addr_top {
							font-size: 28rpx;
							color: #212121;
							font-weight: 500;
							line-height: 50rpx;
							.text {
								margin-left: 39rpx;
							}
						}
						.addr {
							width: 100%;
							box-sizing: border-box;
							font-size: 24rpx;
							color: #666666;
							line-height: 40rpx;
						}
					}
				}
				
			}
			
		}
	
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		margin-bottom: 130rpx;
		.section {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			.group_section {
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.goods {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx 0;
					.goods_top {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						.goodsImg {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
						}
						.goods_info {
							width: calc(100% - 160rpx);
							box-sizing: border-box;
							padding-left: 20rpx;
							display: flex;
							flex-flow: column;
							justify-content: space-between;
							font-size: 28rpx;
							color: #140005;
							.goods_price {
								width: 100%;
								box-sizing: border-box;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: 22rpx;
								color: #212121;
								.price {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									font-size: 28rpx;
									color: #E42221;
									.pricesign {
										color: #FFDA71;
										font-size: 26rpx;
										// padding-top: 5rpx;
									}
								}
							}
							.goods_attr {
								width: 100%;
								box-sizing: border-box;
								font-size: 24rpx;
								color: #999999;
							}
							
						}
						
					}
					.goods_bottom {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						padding-top: 30rpx;
						.botBtn {
							width: 100rpx;
							box-sizing: border-box;
							text-align: center;
							line-height: 50rpx;
							border: 2rpx solid #C7973B;
							color: #C7973B;
							border-radius: 100rpx;
							font-size: 24rpx;
						}
						
						
					}
					
				}
			}
			.order_total {
				width: 100%;
				box-sizing: border-box;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 22rpx;
				border-bottom: 2rpx solid #F5F5F5;
				font-size: 28rpx;
				color: #333333;
				.sign {
					color: #FFDA71;
					font-size: 32rpx;
				}
			}
			.uni-list-cell {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.radio {
					transform: scale(0.8);
				}
				.uni_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.left_image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
				
			}
			.order_title {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				line-height: 102rpx;
				font-size: 30rpx;
				font-weight: 500;
			}
			.order_info_list {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #212121;
				border-top: 2rpx solid #F5F5F5;
				.order_list_left {
					width: 162rpx;
					box-sizing: border-box;
					color: #666666;
				}
				
			}
			
		}
		
	}
	
	// 底部操作
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 16rpx 28rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.bottom_cont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #666666;
			&.bottomCurr {
				justify-content: flex-end;
			}
			.settleTotal {
				display: flex;
				line-height: 80rpx;
				.settle_txt {
					font-size: 34rpx;
					color: #E42221;
					padding-left: 24rpx;
				}
			}
			.settle_btn {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.botBtn {
					width: 200rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 70rpx;
					border: 2rpx solid #C7973B;
					color: #C7973B;
					border-radius: 100rpx;
					&:last-child {
						margin-left: 16rpx;
					}
					&.payBtn {
						background: #E42221;
						border: 2rpx solid #E42221;
						color: #FFFFFF;
					}
				}
			}
		
		
		}
	
		
		
		
		
	}
	
	
	
	
	
	

</style>
